<template>
  <ul class="clist pbpage">
    <li class="citem" v-for="(l,i) in list " :key="i">
        <router-link to=""  class="aitem">
            <div class="item item1">
              <p class="name">
                {{ l.name }}
              </p>
              <p class="price">
                <i>￥</i>
                {{ l.lowPrice/100 }}
                <span> 起</span>
              </p>
            </div>

             <div class="item item2">
              <p class="address name">
                {{ l.address }}
              </p>
              <p class="distance">
                <span v-if="l.Distance">
                  {{ l.Distance.toFixed(1) }}
                  <span> km</span>
                </span>
                <span v-else>
                    距离未知
                </span>
              </p>
            </div>
        </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    list: Array 
  }
}
</script>


<style lang="scss">
  .clist{
    margin-top:10px;
    .citem{
      padding:15px;
      position: relative;
      background-color: #fff;
      border-bottom:1px solid #f4f4f4;
      .aitem{
        width:100%;
        .item{
          display: flex;
          justify-content: space-between;
          margin-top:6px;
          align-items: center;
          
          .name{
            color: #191a1b;
            font-size: 15px;
            display: block;
            max-width: 80%;
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap
          }
          .address{
            color: #797d82;
            font-size: 12px;
          }
          .price{
              font-size: 15px;
              color: #ff5f16;
              span {
                  font-size: 12px;
              }
              i {
                font-size: 12px;
                font-style: normal;
              }
          }
          .distance{
              font-size: 12px;
              color: #797d82
          }
        }
      }
    }
  }
</style>